@import "./mixin.less";
@import "./var.less";
.message{
    display:flex;
    white-space:nowrap;
    align-items:center;
    justify-content:center;
    background-color:red;
    padding:8px;
    height:50px;
    border-radius:7px;
    box-shadow:5px 5px 10px #888;
    .self-center();
    color:white;
    transform:translate(-50%, -50%) translateY(20px);
    transition:0.3s;
    opacity:0;
    &-info { //不同的消息框对应不同的背景颜色 -为了引用样式时方便
        background: @primary;
    }
    &-success {
        background: @success;
    }
    &-warn {
        background: @warn;
    }
    &-error {
        background: @danger;
    }
}
.icon{
    flex:0 0 auto;
    font-size:25px;
    margin-right:5px;
}